<template>
  <div class="form_item-form_list">
    <el-descriptions v-for="(list_row,i) in display_list" :direction="this_config.direction" :column="this_config.column" border :title="get_title(i)">
      <template v-for="(row,k2) in list_row.form_config">
        <el-descriptions-item v-if="row.type!='hidden'" :span="list_row.span_map[k2] || 1" :label="row.label" >
          <component v-if="is_component(row.type)" :is="row.type" name="" :value="row.value" v-bind="bind_param(row)" :is_info="true" :is_list="true"></component>
          <list v-else-if="row.type=='list'" :data="row.value" :cols="json_decode(row.config)"></list>
          <p v-else class="text-ellipsis">{{row.value}}</p>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  _title_: '表单数据列表',
  _can_config_: true,
  _can_form_param_: true,
  name: "form_list",
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      this_config: this.config_decode(),
      need_display: true,
      this_value: this.value,
      span_map_list: {},
    }
  },
  methods: {
    is_component(type){
      let map = this.field_type();
      return type in map;
    },
    json_decode(v){
      try {
        return JSON.parse(v);
      } catch (e) {
        return {};
      }
    },
    config_decode(){
      let config = {
        column: 3,
        title: "",
        direction: "horizontal",
        span_map: {},
      }
      if (typeof this.config == "object") {
        return Object.assign(config, this.config);
      }else {
        return Object.assign(config, this.json_decode(this.config));
      }
    },
    get_title(i){
      if (this.this_config.title) return this.this_config.title + " - " + i;
      return "";
    },
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.value;
    },
    config(){
      this.this_config = this.config_decode();
    }
  },
  computed: {
    display_list(){
      let column = this.this_config.column;
      let span_map = this.this_config.span_map;
      let res = [];
      Object.keys(this.value).forEach(k1=>{
        let form_config = this.value[k1];
        let span_map_row = {};

        let span_sum = 0;
        let last_k2 = "";
        Object.keys(form_config).forEach(k2=>{
          let row = form_config[k2];
          if (row.type=='hidden') return;
          let name = row.name;
          let span = row.descriptions_span || span_map[name] || 1;
          span = Math.min(span, column);
          if (span_sum + span > column){
            span_map_row[last_k2] += (column - span_sum);
            span_sum = 0;
          }
          span_map_row[k2] = span;
          last_k2 = k2;
          span_sum = (span_sum+span) % column;
        })

        res.push({
          form_config: form_config,
          span_map: span_map_row,
        })
      })

      return res;
    }
  },
}
</script>

<style scoped>
.form_item-form_list-row{display: flex;flex-wrap: wrap;width: 100%;}
.form_item-form_list-item>label{width: 8em;text-align: right;padding-right: 1em;}
.form_item-form_list[type="block"] .form_item-form_list-item{width: 100%;}
</style>